import React, {Component} from 'react'
import {View, Text, Image, TouchableOpacity, Modal, TextInput} from 'react-native'
import ImageAttachment from './image_attachment'
import VideoAttachment from './video_attachment'
import AudioAttachment from './audio_attachment'
import Badge from './badge'
import styles, { BIG } from '../../config/styles'

class Attachment extends Component {
    static defaultProps = {
        attachment: {
            url: '',
            name: '',
            allowDestroy: false,
            onDestroy: () => {},
            style: {}
        }
    }

    constructor (props) {
        super(props);
        this.state = {
            edittingName: false,
            newAttachmentName: props.attachment.name
        }
    }


    //编辑附件名称
    editAttachmentName = () => {
        this.setState({
            edittingName: true
        })
    }

    //改变附件的名字
    changeAttachmentName = () => {
        const {newAttachmentName} = this.state
        if (newAttachmentName.length == 0) {
            Toast.show('请输入附件名称')
            return
        } else if (newAttachmentName.length > 10) {
            Toast.show('附件名太长')
            return
        }
        this.props.attachment.name = newAttachmentName
        this.setState({edittingName: false})
    }

    editNameModalTemplate = () => {
        return (
            <Modal 
                animationType={'none'}
                visible={this.state.edittingName}
                transparent={true}
                onRequestClose={() => {}}>

                <TouchableOpacity
                    onPress={() => this.setState({edittingName: false})}
                    style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center'}}>
                    
                    <View style={{justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', marginLeft: 30, marginRight: 30, padding: 15, borderRadius: 10}}>
                        <Text style={{alignItems: 'center', paddingBottom: 10}}>附件名称</Text>
            
                        <TextInput 
                            value={this.state.newAttachmentName}
                            onChangeText={(txt) => this.setState({newAttachmentName: txt})}
                            placeholder={'请输入附件名称'} 
                            style={{height: 30, padding: 0, paddingVertical: 0, width: 100, alignItems: 'center'}} />
                       
                        <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
                            <TouchableOpacity 
                                onPress={() => this.setState({edittingName: false})}
                                style={{justifyContent: 'center', alignItems: 'center', paddingRight: 20}}>
                                <Text style={[styles.text_blue, {fontSize: BIG}]}>取消</Text>
                            </TouchableOpacity>
                            <TouchableOpacity 
                                onPress={this.changeAttachmentName}
                                style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Text style={[styles.text_blue, {fontSize: BIG}]}>确认</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    
                </TouchableOpacity>

            </Modal>
        )
    }

    attachmentTemplate = () => {
        const {attachment, index, urls, url, navigation} = this.props
        switch(this.props.attachment.type) {
            case 'image':
                return(
                    <View>
                        <ImageAttachment {...this.props} />
                        <TouchableOpacity 
                            onPress={this.editAttachmentName}
                            style={{alignItems: 'center'}}>

                            <Text numberOfLines={1}>
                                {this.props.attachment.name}
                            </Text>
                        </TouchableOpacity>
                    </View>
                  
                )
            case 'video':
                return(
                    <View>
                        <VideoAttachment
                            attachment={attachment} />
                        <TouchableOpacity 
                            onPress={this.editAttachmentName}
                            style={{alignItems: 'center'}}>

                            <Text numberOfLines={1}>{attachment.name}</Text>
                        </TouchableOpacity>
                    </View>
                  
                )
            case 'audio':
                return(
                    <View>
                        <AudioAttachment
                            navigation={navigation}
                            attachment={attachment}/>
                        <TouchableOpacity 
                            onPress={this.editAttachmentName}
                            style={{alignItems: 'center'}}>

                            <Text numberOfLines={1}>
                                {attachment.name}
                            </Text>
                        </TouchableOpacity>
                    </View>
                   
                )
                    
        }
    }

    render () {
        const attachment = this.props.attachment
        return (
            <View style={this.props.style}>
                {attachment.allowDestroy ? this.editNameModalTemplate() : null}
                <View style={{flexDirection: 'row'}}>
                    { this.attachmentTemplate() }
                    <Badge 
                        text={'x'}
                        display={attachment.allowDestroy || false}
                        onPress={() => {attachment.onDestroy() || (() => {}) }}
                        offsetLeft={4}
                    />
                </View>
            </View>
        )
       
    }
}

export default Attachment